<template>
  <div class="AddOrUpdate_main add_container column_two" v-loading="loading">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="编码名称" prop="codeName">
          <el-input v-model="formData.codeName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="formData.tableName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="字段名" prop="columnName">
          <el-input v-model="formData.columnName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="编码类型" prop="ruleType">
          <el-select v-model="formData.ruleType" clearable>
            <el-option
              v-for="item in ruleTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="前缀" prop="preFix">
          <el-input v-model="formData.preFix" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="流水号位数" prop="serialLen">
          <el-input v-model="formData.serialLen" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="流水号初始值" prop="startVal">
          <el-input v-model="formData.startVal" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="允许修改" prop="status" v-if="isShow">
          <el-switch
            v-model="formData.allowEdit"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999999"
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="是否系统生成" prop="status" v-if="isShow">
          <el-switch
            v-model="formData.status"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#999999"
          />
        </el-form-item>

      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { add as save, edit as update, getInfo } from '@/api/system/codeRule'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      formData: {
        id: undefined,
        codeName: undefined,
        tableName: undefined,
        columnName: undefined,
        ruleType: undefined,
        preFix: undefined,
        serialLen: undefined,
        startVal: undefined,
        remark: undefined,
        allowEdit: '0',
        status: '1'
      },
      rules: {
        codeName: [
          { required: true, message: '编码名称不能为空', trigger: 'change' }
        ],
        tableName: [
          { required: true, message: '表名不能为空', trigger: 'change' }
        ],
        columnName: [
          { required: true, message: '字段名不能为空', trigger: 'change' }
        ],
        ruleType: [
          { required: true, message: '编码类型不能为空', trigger: 'change' }
        ],
        serialLen: [
          { required: true, message: '流水号位数不能为空', trigger: 'change' }
        ],
        startVal: [
          { required: true, message: '流水号初始值不能为空', trigger: 'change' }
        ]
      },
      ruleTypeOptions: [
        { value: '流水号', label: '流水号' },
        { value: '前缀+流水号', label: '前缀+流水号' },
        { value: '前缀+年月日+流水号', label: '前缀+年月日+流水号' },
        { value: '年月+流水号', label: '年月+流水号' },
        { value: '年月日+流水号', label: '年月日+流水号' }
      ]
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      this.isShow = true
      this.loading = false
    } else { // 有id就是编辑
      this.getById()
    }
  },
  methods: {
    getById() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.isShow = true
        this.loading = false
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.id) { // 没有id就是新增
            save(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.getList() // 调用父组件的刷新方法
            })
          } else { // 有id就是编辑
            update(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.getList() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>

</style>
